<script lang="ts" setup>
import ComplainCard from "./ComplainCard.vue";
import ProductBox from "../Common/ProductBox.vue";
import { ref } from "vue";
import { message } from "ant-design-vue";
import { reactive } from "vue";
import type { UnwrapRef } from "vue";
const [messageApi, contextHolder] = message.useMessage();

const active = ref(0);
const chosenCategory = ref(-1);

const category = [
  {
    name: "产品类",
    icon: "./console/function.png",
    desc: "产品问题协助",
  },
  {
    name: "服务类",
    icon: "./console/heart.png",
    desc: "服务相关问题",
  },
  {
    name: "账号类",
    icon: "./console/complain.png",
    desc: "账户问题咨询",
  },
  {
    name: "财务类",
    icon: "./console/wallet.png",
    desc: "充值，发票，合同相关咨询",
  },
  {
    name: "售前咨询类",
    icon: "./console/message.png",
    desc: "售前咨询类相关",
  },
];

const problemChosen = ref(-1);
const problemList = [
  "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "xxxxxxxxxxxxxxxxxxxxxxxxx",
  "xxxxxxxxxxxxxxxxx",
  "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "xxxxxxxxxxxxxxxxxxxxxxxxaxxxxxxx",
];

const resolution = `
<div><p>阿帕云引擎（分销版）更新至v7.8.5版本</p><p></p><p>更新前请务必做好网站及数据库的备份，以防不测。</p><p></p><p>备份参考：https://www.apayun.com/doc/391</p><p></p><p>【后台】</p><p></p><p></p><p>优化：云网络支持变更端口类型；</p><p></p><p>优化：发票管理、线下汇款支持导出功能；</p><p></p><p>优化：微信登录设置支持选择公众号、开放平台微信登录方式；</p><p></p><p>优化：工单列表展示合作商名称优化；</p><p></p><p>修复：一个订单存在多个业务时，订单列表跳转业务列表提示业务ID过长的问题；</p><p></p><p>修复：裸金属设置配件管理模式后非自产机型修改提示硬盘不存在的问题；</p><p></p><p>修复：虚拟主机数据库同步后密码展示乱码的问题；</p><p></p><p>修复：多级代理情况下，上游托管业务升级完成，下游未同步状态的问题；</p><p></p><p>【用户中心 】</p><p></p><p>优化：续费管理批量续费逻辑优化；</p><p></p><p>优化：商标新增主体信息提示以及示例更新；</p><p></p><p>优化：设置公众号登录时微信登录绑定和微信通知入口合并；</p></div>
`;

let check: (() => string | undefined)[] = [
  () => {
    if (chosenCategory.value === -1) return "请选择类型";
  },
  () => {
    if (problemChosen.value === -1) return "请选择问题类型";
  },
  () => {
    return undefined;
  },
  () => {
    return undefined;
  },
];

const prevStep = () => {
  if (active.value === 3) active.value--;
  active.value--;
};
const nextStep = () => {
  const res = check[active.value]();
  if (res) {
    messageApi.info(res);
    return;
  }
  active.value++;
};

const submit = () => {
  console.log("submit");
};

//

interface FormState {
  name: string;
  phone: string;
  type: string;
  desc: string;
  upload: string;
}
const formState: UnwrapRef<FormState> = reactive({
  name: "",
  phone: "",
  type: "",
  desc: "",
  upload: "",
});
// const labelCol = { style: { width: "150px" } };
const wrapperCol = { span: 14 };
//
</script>
<template>
  <ProductBox title="提交工单">
    <div class="flex flex-col items-center pb-10">
      <el-steps class="w-full px-10" :active="active" finish-status="success">
        <el-step title="Step 1" description="选择问题所属产品" />
        <el-step title="Step 2" description="选择问题类别" />
        <el-step title="Step 3" description="推荐解决方案" />
        <el-step title="Step 4" description="创建工单" />
      </el-steps>

      <div class="flex flex-wrap pl-5 pr-5" v-if="active === 0">
        <ComplainCard v-for="(item, index) in category" :name="item.name" :desc="item.desc" :icon="item.icon"
          :chosen="chosenCategory === index" @click="chosenCategory = index" />
      </div>

      <div class="flex flex-col justify-center items-center pt-20 w-full px-10 md:w-150" v-else-if="active === 1">
        <p>选择问题类别：</p>
        <a-radio-group v-model:value="problemChosen" name="radioGroup" class="flex flex-col w-full">
          <a-radio :value="index" v-for="(item, index) in problemList" :key="index + 'problem'"
            class="w-full mb-5 items-start ">
            <p class="break-all leading-normal m-0 p-0">
              {{ item }}
            </p>
          </a-radio>
        </a-radio-group>
      </div>

      <div class="flex pt-20 px-10" v-if="active === 2">
        <div v-html="resolution"></div>
      </div>

      <div class="flex pt-20 w-full max-w-150 px-10" v-if="active === 3">
        <a-form :model="formState" :label-col="{
          style: {
            width: '100px'
          }
        }" :wrapper-col="wrapperCol" class="w-full">
          <a-form-item label="问题类别" name="type" class="w-full">
            <a-select v-model:value="formState.type" placeholder="请选择问题类别">
              <a-select-option :value="item.name" v-for="(item, index) in category" :key="index + 'cate'">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item name="upload" label="上传" extra="上传图片附件">
            <a-upload name="logo" action="/upload.do" list-type="picture">
              <a-button>点击上传</a-button>
            </a-upload>
          </a-form-item>

          <a-form-item label="问题描述">
            <a-textarea v-model:value="formState.desc" class="w-200 h-150" />
          </a-form-item>

          <a-form-item label="联系人姓名" name="name">
            <a-input v-model:value="formState.name" />
          </a-form-item>
          <a-form-item label="联系方式" name="phone">
            <a-input v-model:value="formState.phone" />
          </a-form-item>
        </a-form>
      </div>

      <div class="mt-10 flex">
        <a-button class="mr-5" v-if="active > 0" @click="prevStep">
          上一步
        </a-button>

        <a-button type="primary" v-if="active < 3 && active != 2" @click="nextStep">
          下一步
        </a-button>

        <a-button class="ml-5" type="primary" @click="active += 2" v-if="active === 1">
          未找到解决方案
        </a-button>

        <a-button type="primary" @click="submit" v-if="active === 3">
          提交
        </a-button>
      </div>
    </div>
    <context-holder />
  </ProductBox>
</template>

<style lang="scss" scoped>
.min {
  word-break: break-all;
}
</style>
